<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="/before/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/before/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/before/js/common_js.js" type="text/javascript"></script>
    <script src="/before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/after/js/vue/vue.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <div class="index_style clearfix">
    <!--产品版块样式图层-->
    <div class="Product_area clearfix">
        <div class="area_title">
            <!--分类-->
            <div class="name" style="float:left"><span class="floors"><em class="iconfont icon-xiangzi"></em></span>独家特供</div>
            <div class="name" style="float:right;margin-left:30px;width:60px;text-align:center;"><a id="more">更多</a></div>
            <div v-for="type in stype" onmouseenter="a(this)" v-bind:title="type.id" onmouseleave="b(this)" style="float:right;margin-left:20px;width:120px;text-align:center;background:#D63321; color:#FFF; font-size:18px">{{type.type}}</div>
        </div>
        <div class="list_style clearfix">

            <div id="guessyou" class="m">
                <div class="mc"><div class="spacer"><i></i></div>
                    <ul id="lists">
                        <!--内容循环显示部分-->
                        <li v-for="book in bookList" class="fore1">
                            <div class="p-img">
                                <a data-clk="" :href="'/main/LQ_details.do?id='+book.id" target="_blank"><img data-lazy-img="done" width="130" height="130"  v-bind:title="book.picture" :src="'/uploads/'+book.picture" class=""></a>
                            </div>
                            <div class="p-info">
                                <div class="p-name">
                                    <a data-clk="" target="_blank"><big>书名：{{book.name}}</big></a>
                                    <a data-clk="" target="_blank"><br/>作者：{{book.author}}</a>
                                </div>
                                <div class="p-price" data-lazyload-fn="done"><span class="left"><i>¥</i>{{book.price}}</span><span class="Original_Price">{{book.price}}</span></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    </div>
</div>
</body>
<script>
    //    VUE
    var app = new Vue({
        el:'#app',
        data:{
            stype:[],
            bookList:[]
        }
    })
    //初始化加载
    $(function(){
//        显示分类
        showstype();
//        显示图书
        showBook();
    })

    //    分类
    function showstype(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/main/querySType.do",
            success:function(msg){
                app.stype = msg.stype;
            },error:function(){
                alert("显示错误！");
            }
        })
    }
    //    更多点击事件
    $("#more").toggle(
            function(){
                showAllstype();
            },function(){
                showstype();
            }
    )
    //    显示更多分类
    function showAllstype(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/main/queryAllSType.do",
            success:function(msg){
                app.stype = msg.stype;
            },error:function(){
                alert("显示错误！");
            }
        })
    }
    //    图书显示
    function showBook(type){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/main/queryBook.do",
            data:{id:type},
            success:function(msg){
                app.bookList = msg.bookList;
            },error:function(){
                alert("显示错误！");
            }
        })
    }

    function a(obj){
        $(obj).css("background","#6495ED");
        showBook(obj.title);
    }
    function b(obj){
        $(obj).css("background","#D63321");
    }
</script>
</html>